<template>
  <v-dialog v-model="forgetFlag" :fullscreen="isMobile" max-width="460">
    <v-card class="login-container" style="border-radius:4px">
      <v-icon class="float-right" @click="forgetFlag = false">
        mdi-close
      </v-icon>
      <div class="login-wrapper">
        <!-- 用户名 -->
        <v-text-field
                v-model="form.username"
                label="邮箱号"
                placeholder="请输入您的邮箱号"
                clearable
                @keyup.enter="forget"
                @blur="check"
        />

        <div class="mt-7 send-wrapper">
          <v-text-field
                  maxlength="6"
                  v-model="form.code"
                  label="验证码"
                  placeholder="请输入6位验证码"
          />
          <v-btn text small :disabled="flag" @click="sendCode">
            {{ codeMsg }}
          </v-btn>
        </div>
        <!-- 密码 -->
        <v-text-field
                v-model="form.password"
                class="mt-7"
                label="密码"
                placeholder="请输入您的密码"
                @keyup.enter="forget"
                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                :type="show ? 'text' : 'password'"
                @click:append="show = !show"
        />
        <!-- 密码 -->
        <!-- <v-text-field
           v-model="form.confirm"
           class="mt-7"
           label="确认密码"
           placeholder="请再次输入您的密码"
           @keyup.enter="forget"
           :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
           :type="show ? 'text' : 'password'"
           @click:append="show = !show"
         />-->
        <!-- 按钮 -->
        <v-btn
                class="mt-7"
                block
                color="green"
                style="color:#fff"
                @click="forget"
        >
          确定
        </v-btn>
        <!-- 登录 -->
        <div class="mt-10 login-tip">
          已有账号？<span @click="openLogin">登录</span>
        </div>
      </div>
    </v-card>
  </v-dialog>
</template>

<script>
    import request from '../../utils/request'
    export default {
        data: function() {
            return {
                form:{username: "", password: "",
                    confirm:'',
                    code:''
                },

                code: "",

                flag: true,
                codeMsg: "发送",
                second: 60,
                timer:null,
                show: false
            };
        },
        methods: {

            countDown() {

                this.flag = true
                this.timer = setInterval(() => {
                    if (this.second > 0) {
                        this.second--
                        this.codeMsg = this.second
                    } else {
                        clearInterval(this.timer)
                        this.timer = null
                        this.flag = false
                        this.codeMsg = '发送'
                        this.second = 60
                    }
                }, 1000)
            },

            check(){
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

                if (this.form.username===''){
                    this.flag=true
                }
                if (!reg.test(this.form.username)) {
                    this.$toast({ type: "error", message: "邮箱格式不正确" });
                    this.flag=true
                    return false;
                }else{
                    this.flag=false
                }
            },
            openLogin() {
                this.$store.state.forgetFlag = false;
                this.$store.state.loginFlag = true;
            },
            sendCode() {
                this.$toast({
                    type:'success',
                    message:"邮件发送成功"
                })
                request.post("/user/sendEmail/"+this.form.username,this.form.code).then(res=>{



                    console.log(res.code)
                })
                // 显示验证码
                this.countDown();

            },

            forget() {
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!reg.test(this.form.username)) {
                    this.$toast({ type: "error", message: "邮箱格式不正确" });
                    return false;
                }
                if (this.form.password.trim().length < 6) {
                    this.$toast({ type: "error", message: "密码不能少于6位" });
                    return false;
                }
                /* if (this.form.confirm.trim().length < 6) {
                   this.$toast({ type: "error", message: "密码不能少于6位" });
                   return false;
                 }*/
                request.put("/user/forget",this.form).then(res=>{
                    if (res.code===20000){
                        this.$toast({type:"success",message:'修改成功'})
                        this.$store.state.forgetFlag = false;
                        this.$store.state.loginFlag = true;
                    } else{
                        this.$toast({type:"error",message:res.msg})
                    }
                })
            }
        },
        computed: {
            forgetFlag: {
                set(value) {
                    this.$store.state.forgetFlag = value;
                },
                get() {
                    return this.$store.state.forgetFlag;
                }
            },
            isMobile() {
                const clientWidth = document.documentElement.clientWidth;
                if (clientWidth > 960) {
                    return false;
                }
                return true;
            }
        },
        watch: {
            username(value) {
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (reg.test(value)) {
                    this.flag = false;
                } else {
                    this.flag = true;
                }
            }
        }
    };
</script>
